<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 1100px;
			height: 1100px;
			background-image: url("../图片/5.png");
			background-repeat: no-repeat;
			margin: 30px auto;
			position: relative;
		}
		.picture1{
			position: absolute;
			top: 45px;
			left: 495px;
			animation: one 2s linear infinite alternate;
		}
		.picture2{
			position: absolute;
			top: 180px;
			left: 320px;
			animation: one 2s linear infinite alternate;
		}
		.picture3{
			position: absolute;
			top: 323px;
			left: 340px;
			animation: one 2s linear infinite alternate;
		}
		.picture4{
			width: 50px;
			height: 65px;
			background-size: cover;
			position: absolute;
			top: 52px;
			left: 350px;
			animation: two 10s linear infinite;
		}
		.picture5{
			width: 50px;
			height: 50px;
			background-image: url("../图片/c2.png");
			position: absolute;
			top: 210px;
			left: 600px;
		}
		@keyframes one{
			0%{
				transform: translate(0%,0%);
			}
			100%{
				transform: translate(0%,-10%);
			}
		}
		@keyframes two{
			0%{
			top: 52px;
			left: 350px;
			background-image: url("../图片/c1.png");
			}
			49%{
				background-image: url("../图片/c1.png");
			}
			50%{
				top: 220px;
				left: 610px;
				background-image: url("../图片/c2.png");
			}
			100%{
				top:115px ;
				left:785px ;
				background-image: url("../图片/c2.png");
			}
		}
		


		
	</style>
</head>
<body>
	<div class="box">

		<img class="picture1" src="../图片/6.png">
		<img class="picture2" src="../图片/8.png">
		<img class="picture3" src="../图片/15.png">
		<div class="picture4"></div>
		<div class="picture5"></div>
		
	</div>








</body>
</html>